<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="../js/common/echats5.3.0.js"></script>
    <script src="../js/common/jquery-2.1.4.min.js"></script>
    <script src="../js/common/echarts-gl.min.js"></script>
    <script src="../js/common/rem.js"></script>
    <script src="../js/common/sunCity.js"></script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=dcce730e187f51e0fe140979e3c6a66f"></script>
    <script src="https://webapi.amap.com/loca?v=2.0.0&key=dcce730e187f51e0fe140979e3c6a66f"></script>
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/animate.min.css" />
    <link rel="stylesheet" href="../css/animate.css" />
    <link rel="stylesheet" href="../css/index.css" />
    <script src="../js/common/countNum.js"></script>
    <script src="../js/common/crypto-js.min.js"></script>
    <script src="../js/common/url.js"></script>
</head>
<body style="overflow: hidden">
    <div id="head"></div>
    <script type="text/javascript">
        $("#head").load("./header.html");
        setTimeout(function () {
            // 菜单
            var res = $(".bottomMenu .menu:contains(终端统计)");
            $(res).addClass("active");
        }, 500);
    </script>

    <!-- 中间数据 -->
    <div class="flexaround">
        <div class="bigdata_box flexaround">
            <div>
                <div class="name">终端总数</div>
                <div class="mt10">
                    <span class="fontding font24 text-xie" id="totalNum" style="margin-right: 6rem;">0</span>台
                </div>
            </div>
            <div>
                <img src="../images/index/icon_fgx.png" alt="" style="width: 25rem;">
            </div>
            <div>
                <div class="name red">终端累计在线</div>
                <div class="mt10">
                    <span class="fontding font24 text-xie" id="totalTimeNum" style="margin-right: 6rem;">0</span>小时
                </div>
            </div>
        </div>
    </div>
    <!-- 左侧 -->
    <div class="leftBox animated animate__fadeInLeftBig">
        <div class="boxCard">
            <div class="boxCardTitle">
                终端运行情况
                <span>上次更新：<span id="lastUpdateTime">2023.10.25 10:32:43</span></span>
            </div>
            <div style="position: relative;">
                <div id="terminalRunning" style="height:160rem"></div>
                <div style="position: absolute;bottom: 12rem;left: 0; padding:0 12rem; width: 100%;height: 42rem;display: flex;justify-content: space-between;">
                    <div class="use-title-item-box">
                        <div class="use-title-box-item">
                            <div style="background: #1563FF" class="use-title-box-item-circle"></div>
                            <div class="use-title-box-item-text">在线终端</div>
                         </div>
                         <div class="use-title-num-box"><span id="onlineTerminal">0</span>台</div>
                    </div>
                    <div class="use-title-item-box">
                        <div class="use-title-box-item">
                            <div style="background: #E34D59" class="use-title-box-item-circle"></div>
                            <div class="use-title-box-item-text">故障终端</div>
                         </div>
                         <div class="use-title-num-box"><span id="malfunctionTerminal">0</span>台</div>
                    </div>
                    <div class="use-title-item-box">
                        <div class="use-title-box-item">
                            <div style="background: #D0DEEE" class="use-title-box-item-circle"></div>
                            <div class="use-title-box-item-text">离线终端</div>
                         </div>
                         <div class="use-title-num-box"><span id="offlineTerminal">0</span>台</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="boxCard mt25">
            <div class="boxCardTitle">
                各乡镇终端数量统计
            </div>
            <div id="perTownNumCount" style="height:360rem"></div>
        </div>
        <div class="boxCard mt25">
            <div class="boxCardTitle">
                终端事件列表
            </div>
            <table class="mytable">
                <thead>
                    <tr>
                        <th style="width: 10%;">序号</th>
                        <th style="width: 40%;">终端位置</th>
                        <th style="width: 30%;">事件时间</th>
                        <th style="width: 20%;">设备状态</th>
                    </tr>
                </thead>
            </table>

            <div id="termianl_table_container" style="height: 150rem; overflow: hidden">
                <table id="termianl-con" class="mytable zdsjlbTable">
                </table>
            </div>
        </div>
    </div>
    <!-- 右侧 -->
    <div class="rightBox animated animate__fadeInRightBig">
        <div class="boxCard">
            <div class="boxCardTitle">
                应用使用情况
            </div>
            <div class="chooseBtnGroup flex mt10 use-tab-group">
                <div class="active" data-type="">总量</div>
                <div data-type="thisYear">本年</div>
                <div data-type="thisMonth">本月</div>
                <div data-type="today">当日</div>
            </div>
            <div class="use-map-box">
                <div class="ues-map-top">
                    <div class="use-map-bg" id="useMapChart"></div>
                    <div class="use-title-box">
                        <div class="use-title-item-box">
                            <div class="use-title-box-item">
                                <div style="background: #66E1DF" class="use-title-box-item-circle"></div>
                                <div class="use-title-box-item-text" >秒批秒办</div>
                             </div>
                             <div class="use-title-num-box"><span id="use-mpmb"></span>次</div>
                        </div>
                        <div class="use-title-item-box" style="margin-top: 24rem;">
                            <div class="use-title-box-item">
                                <div style="background: #D0DEEE" class="use-title-box-item-circle"></div>
                                <div class="use-title-box-item-text">证明服务</div>
                             </div>
                             <div class="use-title-num-box"><span id="use-zmfu"></span>次</div>
                        </div>
                    </div>
                </div>
                <div class="use-item-case">
                    <div class="use-title-item-box">
                        <div class="use-title-box-item">
                            <div style="background: #1563FF" class="use-title-box-item-circle"></div>
                            <div class="use-title-box-item-text">便民服务</div>
                         </div>
                         <div class="use-title-num-box"><span id="use-bmsf"></span>次</div>
                    </div>
                    <div class="use-title-item-box">
                        <div class="use-title-box-item">
                            <div style="background: #34FFBF" class="use-title-box-item-circle"></div>
                            <div class="use-title-box-item-text">公共服务</div>
                         </div>
                         <div class="use-title-num-box"><span id="use-ggsf"></span>次</div>
                    </div>
                    <div class="use-title-item-box">
                        <div class="use-title-box-item">
                            <div style="background: #0092FF" class="use-title-box-item-circle"></div>
                            <div class="use-title-box-item-text">政务服务</div>
                         </div>
                         <div class="use-title-num-box"><span id="use-zwsf"></span>次</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="boxCard mt8">
            <div class="boxCardTitle">
                各乡镇终端使用情况
            </div>
            <div class=" flex mt10 perTownCount" id="">
                <div data-type="zw" class="perTownCountItem active">政务</div>
                <div data-type="cx" class="perTownCountItem">公共</div>
                <div data-type="bmgj" class="perTownCountItem">便民</div>
                <div data-type="zm" class="perTownCountItem">证明</div>
                <div data-type="mpmb" class="perTownCountItem">秒批秒办</div>
            </div>
            <div style="height:223rem">
                <table class="mytable mt10" style="table-layout: fixed">
                    <thead>
                        <tr>
                            <th style="width: 20%;">序号</th>
                            <th style="width: 60%;text-align: center;">区划名称</th>
                            <th style="width: 20%;text-align: left;">使用量</th>
                        </tr>
                    </thead>
                </table>
                <div id="hot-con_table_container" style="height: 208rem; overflow: hidden">
                    <table id="hotCon" class="mytable" style="table-layout: fixed">

                    </table>
                </div>
            </div>
        </div>
        <div class="boxCard mt20">
            <div class="boxCardTitle" style="margin-bottom: 10rem;">
                长期离线终端统计
            </div>
            <div class="specLongTimeBox">
                <div class="name">总数</div>
                <div class="value mt10">
                    <span id="longTimeTerminalNum">5</span>台
                </div>
            </div>
            <table class="mytable mt12">
                <thead>
                    <tr>
                        <th style="width: 10%;">序号</th>
                        <th style="width: 60%;">终端位置</th>
                        <th style="width: 30%;">离线时长</th>
                    </tr>
                </thead>
            </table>

            <div id="long-time-terminal_table_container" style="height: 117rem; overflow: hidden">
                <table id="long-time-terminal-con" class="mytable">

                </table>
            </div>
        </div>
    </div>
    <!-- 地图 -->
    <div id="map" style="
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                z-index: 0;
            "></div>
    <!-- 图例 -->
    <div class="map_tl">
        <div><input type="checkbox" name="0" title="在线终端" checked>在线终端</div>
        <div><input type="checkbox" name="1" title="故障终端" checked>故障终端</div>
        <div><input type="checkbox" name="2" title="离线终端" checked>离线终端</div>
        <!-- <div><input type="checkbox" name="3" title="长期离线终端" checked>长期离线</div> -->
    </div>


</body>

</html>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../js/index/sunCity.js"></script>


<script>

    $(".zhezhao").click(function (e) {
        if ($(e.target).context.className == 'tc_box') {
            $(this).hide();
        }
    })
</script>
